{include file="public/layout" /}
<body>
<!--<div id="ID-transfer-demo-value"></div>-->
<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-sm" lay-on="getChecked">确定</button>
<!--    <button type="button" class="layui-btn layui-btn-sm" lay-on="setChecked">全选</button>-->
<!--    <button type="button" class="layui-btn layui-btn-sm" lay-on="reload">重载实例</button>-->

    <button type="button" class="layui-btn layui-btn-sm" lay-on="setChecked">全选</button>
    <button type="button" class="layui-btn layui-btn-sm" lay-on="setUnChecked">全不选</button>
<!--    <button type="button" class="layui-btn layui-btn-sm" lay-on="setReverseChecked">反选</button>-->

</div>

<div id="ID-tree-demo"></div>
<script>
    var index = layer.load();
    var data;
    var area_ids = '{$area_ids}';
    $.ajax({
        url: "/admin/Freight/getRegionNew",
        async: false,
        type: 'get',
        dataType: "json",
        data:{area_ids:area_ids},
        success: function(res) {
            layer.close(index);
            if (res.status == 1) {
                data = res.data;
            } else {
                data = {};
                // alert(R.msg);
            }
        }
    });
    console.log(data);
    var tree;
    layui.use(function(){
        tree = layui.tree;
        var layer = layui.layer;
        var util = layui.util;

        // 模拟数据
        //var data = [{title:'A-1',id:1,field:'name1',checked:true,spread:true,children:[{title:'B-1-1 可允许跳转',id:3,field:'name11',href:'',children:[{title:'C-1-1-3',id:23,field:'',children:[{title:'D-1-1-3-1',id:24,field:'',children:[{title:'E-1-1-3-1-1',id:30,field:''},{title:'E-1-1-3-1-2',id:31,field:''}]}]},{title:'C-1-1-1',id:7,field:'',children:[{title:'D-1-1-1-1 可允许跳转',id:15,field:'',href:''}]},{title:'C-1-1-2',id:8,field:'',children:[{title:'D-1-1-2-1',id:32,field:''}]}]},{title:'B-1-2',id:4,spread:true,children:[{title:'C-1-2-1',id:9,field:'',disabled:true},{title:'C-1-2-2',id:10,field:''}]},{title:'B-1-3',id:20,field:'',children:[{title:'C-1-3-1',id:21,field:''},{title:'C-1-3-2',id:22,field:''}]}]},{title:'A-2',id:2,field:'',spread:true,children:[{title:'B-2-1',id:5,field:'',spread:true,children:[{title:'C-2-1-1',id:11,field:''},{title:'C-2-1-2',id:12,field:''}]},{title:'B-2-2',id:6,field:'',children:[{title:'C-2-2-1',id:13,field:''},{title:'C-2-2-2',id:14,field:'',disabled:true}]}]},{title:'A-3',id:16,field:'',children:[{title:'B-3-1',id:17,field:'',fixed:true,children:[{title:'C-3-1-1',id:18,field:''},{title:'C-3-1-2',id:19,field:''}]},{title:'B-3-2',id:27,field:'',children:[{title:'C-3-2-1',id:28,field:''},{title:'C-3-2-2',id:29,field:''}]}]}];
        // 渲染
        tree.render({
            elem: '#ID-tree-demo',
            data: data,
            showCheckbox: true,  // 是否显示复选框
            onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
            id: 'demo-id-1',
            isJump: true, // 是否允许点击节点时弹出新窗口跳转
            //edit:['add', 'update', 'del'],
            click: function(obj){
                var data = obj.data;  //获取当前点击的节点数据
                layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });
        // 按钮事件
        util.event('lay-on', {
            getChecked: function(othis){
                var checkedData = tree.getChecked('demo-id-1'); // 获取选中节点的数据

                var check_ids = [];
                var check_names = '';
                $.each(checkedData, function (index, item) {
                    if (item.checked) {
                        check_ids.push(item.id)
                        if(check_names){
                            check_names = check_names+','+item.title;
                        }else{
                            check_names = item.title;
                        }
                    }
                    if (item.children.length) {
                        $.each(item.children, function (index2, item2) {
                            if (item2.checked) {
                                check_ids.push(item2.id)
                                check_names = check_names+','+item2.title;
                            }
                        })
                    }
                })
                console.log(check_names);
                console.log(parent.layui);
                parent.layui.$('.select_area_focus').val(check_names);
                parent.layui.$('.select_area_focus').attr('data-ids',check_ids);
                parent.layui.$('.select_area_focus').next('.area_ids').val(check_ids)
                parent.layer.closeAll('iframe');
            },
            // setChecked: function(){
            //     tree.setChecked('demo-id-1', []); // 勾选对应 id 值的节点
            // },
            reload: function(){
                tree.reload('demo-id-1', {}); // 重载实例
            },
            setChecked: function () {
                allSelect(data)
                tree.reload('demo-id-1', {
                    data: data
                });
            }
            , setUnChecked: function () {
                allUnSelect(data)
                tree.reload('demo-id-1', {
                    data: data
                });
            }
            , setReverseChecked: function () {
                reverseChecked(data)
                tree.reload('demo-id-1', {
                    data: data
                });
            }
        });

    });
    // 全选
    function allSelect(database) {
        $.each(database, function (index, item) {
            item.checked = true;
            if (item.children.length) {
                $.each(item.children, function (index2, item2) {
                    if (!item2.checked) {
                        item2.checked = true;
                    }
                })
            }

        })
    }
    //全不选
    function allUnSelect(database) {

        $.each(database, function (index, item) {
            item.checked = false;
            if (item.children.length) {
                $.each(item.children, function (index2, item2) {
                    if (item2.checked) {
                        item2.checked = false;
                    }
                })
            }
        })
    }
    //反选
    function reverseChecked(database) {
        var checkedData = tree.getChecked('demo-id-1'); //获取选中节点的数据
        // let allElement = getId(database);
        let selectElement = getId(checkedData);
        if (selectElement.length) {
            $.each(database, function (index, item) {
                $.each(item.children, function (index2, item2) {
                    if (selectElement.includes(item2.id)) {
                        item2.checked = false;
                    } else {
                        item2.checked = true;
                    }
                })
            })
        } else {
            allUnSelect(database);
        }
        // console.log(allElement, '数据')
        // console.log(getId(checkedData), '选中数据')
    }
    // y用来递归筛选id
    function getId(data) {
        let myArmy = [];
        $.each(data, function (index, item) {
            if (item.children.length) {
                $.each(item.children, function (index2, item2) {
                    myArmy.push(item2.id)
                })
            }
        })
        return myArmy;
    }
    function add(area_ids) {
        var id = '{$id}';
        $.ajax({
            url: "/index.php/admin/Freight/getRegionNew",
            async: false,
            type: 'get',
            dataType: "json",
            data:{area_ids:area_ids,id:id},
            success: function(res) {
                if (res.status == 1) {
                    data = res.data;
                } else {
                    data = {};
                    // alert(R.msg);
                }
            }
        });
    }
</script>
</body>